import { Button, PageHeader, Input } from 'antd'
import ProgramSelect from './ProgramSelect'

const { Search } = Input

const ProgramHeader = (props: any) => {
  const onSearch = (value: string) => {
    props.onSearchChange(value)
  }

  const changeSelectHandler = (option: string) => {
    props.onOptionChange(option)
  }

  return (
    <PageHeader
      title="项目列表"
      subTitle={[
        <div style={{ marginLeft: `40px` }} key={'div'}>
          <span>筛选：</span>
          <ProgramSelect onOptionChange={changeSelectHandler} />
        </div>,
      ]}
      extra={[
        <Search
          placeholder="请输入合同关键字"
          onSearch={onSearch}
          enterButton
          key={'Search'}
        />,
        <Button
          type="primary"
          style={{ borderRadius: `5px`, marginLeft: `10px` }}
          key={'button'}>
          新建项目
        </Button>,
      ]}
    />
  )
}

export default ProgramHeader
